// 导入react与react的组件
import React ,{Component,createRef} from "react";
// childb 继承 Component组件
class Childb extends Component {
    // 构造函数
    constructor(props){
        // 执行父类构造函数
        super(props)
        // 定义状态（数据）
        this.state = {num:2,msg:"两端一线"}
        // 创建一个引用
        this.inpRef = createRef();
    }
    say(){
        alert("真的要走吗？")
    }
    Hi(str){
        alert(str)
    }
    add=(n=1)=>{
        // 状态的更新必须是使用setState
        // 更新视图
        var num= this.state.num;
        num+=n;
        this.setState({num})
    }
    // 渲染
    render(){
        // 返回节点
        return (<div>
            <h1> 表单的绑定</h1>
            <input type="text" ref={this.inpRef} /> 
            <button onClick={()=>alert(this.inpRef.current.value)} >获取值</button>
            
            <p>{this.state.msg}</p>
            <input value={this.state.msg} onChange={e=>this.setState({msg:e.target.value})}></input>
            <h1> 组件的状态</h1>
            <p><button onClick={this.add.bind(this,2)}>{this.state.num}</button></p>
            <p><button onClick={this.add.bind(this,5)}>{this.state.num}</button></p>
            <h1> 类组件 Childb</h1>
            <p onClick={()=>{alert("你好同学")}}>事件响应 行内</p>
            <p onClick={this.say}>事件响应函数</p>
            <p onClick={()=>{this.Hi('我要月薪过W')}}>匿名函数传参</p>
            <p onClick={this.Hi.bind(this,'我要当项目经理')}>bind传参</p>
            {/* <p onClick={this.Hi('错误示范')}>错误传参示范</p> */}
            </div>)
    }
}

export default Childb